<!DOCTYPE html>
<!-- saved from url=(0032)http://localhost:8080/query.html -->
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

	<title>HOME</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		html {
			width: 100vw;
			height: 100vh;
			font-size: 14px;
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			outline: none;
			font-family: 'Montserrat', sans-serif;
			font-weight: 400;
			min-height: 100vh;
			transform: translateZ(0);
			background: url("https://images.unsplash.com/photo-1451485435476-a244439c78cd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjM0MDg1fQ&w=1920") center center / cover no-repeat;
		}

		/* 提示信息 */
		.info {
			width: 220px;
			height: 40px;
			background-color: rgba(255, 255, 255, 0.5);
			position: fixed;
			left: 50%;
			top: 20px;
			transform: translateX(-50%);
			border-radius: 5px;
			text-align: center;
			line-height: 40px;
			color: rgba(255, 255, 255, 0.8);
			user-select: none;
		}

		.v-enter,
		.v-leave-to {
			opacity: 0;
			top: -20px;
		}

		.v-enter-active,
		.v-leave-active {
			transition: all 0.4s ease-in-out;
		}

		[cloak] {
			display: none;
		}


		/* 中间搜索框 */
		.searchBox {
			width: 60%;
			min-width: 400px;
			height: 30vh;
			margin: 10vh auto 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.clock {
			width: 100%;
			height: 60px;
			margin-bottom: 20px;
			color: rgba(6, 40, 90, 0.6);
			font-size: 36px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: "Monoton";
		}

		.clock>p {
			user-select: none;
		}

		.inputBox {
			width: 60%;
			height: 44px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.5);
			padding: 0 15px;
			border-radius: 20px;
		}

		.inputBox>input {
			background: none;
			border: none;
			outline: none;
			padding: 0 10px 0 0;
			flex: 1;
			height: 44px;
			color: #242323;
			font-size: 16px;
		}

		.inputBox>input::placeholder {
			color: #242323;
			font-size: 16px;
		}

		.inputBox>img {
			width: 1.3rem;
			height: 1.3rem;
		}

		.inputBox>img:hover {
			cursor: pointer;
		}

		table {
			margin: auto
		}
	</style>
</head>

<body>
	<div id="app" style="text-align: center;margin-top: 5%; margin-left: 20%;margin-right: 20%;">
		<div class="clock">
			<p id="year">2021</p>/
			<p id="month">10</p>/
			<p id="day">21</p>--
			<p id="hour">19:</p>
			<p id="minute">49:</p>
			<p id="second">59</p>
		</div>
		<div>
			<label>学号</label>
			<el-input v-model='submit_data.unumber' required="required" clearable
				style="width: 150px; margin-right: 20px; margin-left: 5px;"></el-input>
			<label>姓名</label>
			<el-input v-model='submit_data.uname' required="required" clearable
				style="width: 150px; margin-right: 20px; margin-left: 5px;"></el-input>
			<label>班级</label>
			<el-input v-model='submit_data.uclass' required="required" clearable
				style="width: 150px; margin-right: 20px; margin-left: 5px;"></el-input>
			<el-button @click="submit" round>提交</el-button>
		</div>
		<div>
			<div style="margin-bottom: 15px; margin-top: 10px;">
				<el-input v-model="search_data.ustr" placeholder="请输入学号" clearable style="width: 400px;"></el-input>
				<el-button @click="search" round>搜索</el-button>
			</div>

			<template>
				<el-table :data="table_data" stripe stype="width:100%">
					<el-table-column prop="unumber" label="学号">
					</el-table-column>
					<el-table-column prop="uname" label="姓名" width="180">
					</el-table-column>
					<el-table-column prop="uclass" label="班级" width="180">
					</el-table-column>
				</el-table>
			</template>
		</div>
	</div>
</body>



<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!-- <script src="./query_files/vue.min.js"></script> -->

<script>
	window.onload = function () {

		let year_text = document.getElementById("year");
		let month_text = document.getElementById("month");
		let day_text = document.getElementById("day");
		let hour_text = document.getElementById("hour");
		let minute_text = document.getElementById("minute");
		let second_text = document.getElementById("second");
		let timer = setInterval(function () {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth();
			let day = date.getDate();
			let hour = date.getHours();
			let minute = date.getMinutes();
			let second = date.getSeconds();
			year_text.innerHTML = year;
			month_text.innerHTML = (month + 1);
			day_text.innerHTML = day;
			hour_text.innerHTML = hour + ":";
			minute_text.innerHTML = minute + ":";
			second_text.innerHTML = second;
		}, 100);
	};
</script>
<script>
	const vm = new Vue({
		el: "#app",
		data: {
			submit_data: {
				uname: null,
				uclass: null,
				unumber: null
			},
			search_data: {
				ustr: null
			},
			table_data: []
		},
		created: function () {
			let k = this
			axios({
				method: 'post',
				url: '/cgi-bin/query_search',
				dataType: 'json',
				data: {
					ustr: ""
				}
			}).then(function (response) {
				k.table_data = response.data.table_data
				k.search_data = {
					ustr: null
				}
			})
		},
		methods: {
			submit: function () {
				if (this.submit_data.uname == null ||
					this.submit_data.uclass == null ||
					this.submit_data.unumber == null) {
					this.$message.error('请输入信息');
				} else {
					let k = this
					axios({
						method: 'post',
						url: '/cgi-bin/query_submit',
						dataType: 'json',
						data: this.submit_data
					}).then(function (response) {
						if (response.data.msg == "success") {
							k.$message({
								message: '提交成功',
								type: 'success'
							});
						} else {
							k.$message.error('查询异常，请稍后重试');
						}
						k.submit_data = {
							uname: null,
							uclass: null,
							unumber: null
						}
						k.search()
					})
				}
			},
			search: function () {
				if (this.search_data.ustr == null) {
					this.search_data.ustr = ""
				}

				let k = this
				axios({
					method: 'post',
					url: '/cgi-bin/query_search',
					dataType: 'json',
					data: this.search_data
				}).then(function (response) {
					k.table_data = response.data.table_data
					k.search_data = {
						ustr: null
					}
				})
			}

		},
	});
</script>

</html>